<template>
  <sub-page>
    <main-card>
      <div class="add">
        <el-button type="primary" @click="add">新建课程</el-button>
      </div>

      <my-table class="my-table" style="height: 100%">
        <el-table :data="tableData" header-row-class-name="table-header" style="width: 100%">
          <el-table-column prop="album_title" label="课程名称" header-align="center" align="center" min-width="80"> </el-table-column>

          <el-table-column prop="purchase_price" label="课程价格" header-align="center" align="center" min-width="80"> </el-table-column>
          <!-- <el-table-column prop="view" label="播放量" header-align="center" align="center" min-width="80"> </el-table-column> -->
          <el-table-column prop="album_desc" label="课程简介" header-align="center" align="center" min-width="80"> </el-table-column>
          <!-- <el-table-column prop="status" label="课程状态" header-align="center" align="center" min-width="80"> </el-table-column> -->
          <!-- <el-table-column prop="status" label="课程状态" header-align="center" align="center" min-width="80"> </el-table-column> -->
          <el-table-column fixed="right" label="封面图">
            <template slot-scope="scope">
              <img :src="scope.row.album_cover_urlalbum" alt="" class="cover" draggable="false" />
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button @click="toVideoList(scope.row)" type="text" size="small" style="margin-left: 20px">查看</el-button>
              <el-button type="text" size="small" @click="handleClick(scope.row, 'edit')" style="margin-left: 20px">编辑</el-button>
              <el-popconfirm
                confirm-button-text="好的"
                cancel-button-text="不用了"
                icon="el-icon-info"
                icon-color="red"
                :title="'确定删除《' + scope.row.album_title + '》吗？'"
                @confirm="deleteTheCourse(scope.row.album_id)"
                @onConfirm="deleteTheCourse(scope.row.album_id)"
                @cancel="() => {}"
              >
                <el-button type="text" size="small" slot="reference">删除</el-button>
                <!-- <el-button slot="reference">删除</el-button> -->
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </my-table>
    </main-card>
  </sub-page>
</template>

<script>
import SubPage from '@/components/subPage';
import MainCard from '@/components/mainCard';
import MyTable from '@/components/myTable';
import { getMyCourseList, deleteCourse } from '@/api/app/course';

export default {
  components: {
    SubPage,
    MainCard,
    MyTable,
  },
  data() {
    return {
      tableData: [
        // {
        //   title: '如何上传视频',
        //   price: '88.8',
        //   view: '300',
        //   brief: '上传视频简介',
        //   status: '已上架',
        //   id: 1,
        // },
      ],
    };
  },
  created() {
    this.initMyCourseList();
  },
  methods: {
    add() {
      this.$router.push({
        path: 'addCourse',
        query: {
          id: null,
          type: 'add',
        },
      });
    },
    handleClick(row, type) {
      console.log(row);
      this.$router.push({
        path: 'addCourse',
        query: {
          id: row.album_id,
          type: type || 'edit',
        },
      });
    },
    toVideoList(row) {
      this.$router.push({
        path: 'upVideoList',
        query: {
          id: row.album_id,
          // type: 'add',
        },
      });
    },
    initMyCourseList() {
      getMyCourseList()
        .then((res) => {
          console.log(res);
          if (res.data && res.data.list) {
            const format = res.data.list.map((item) => {
              return item;
            });
            this.tableData = format;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    deleteTheCourse(album_id) {
      console.log(album_id);
      deleteCourse({
        album_id,
      })
        .then((res) => {
          console.log(res);
          if (res.code === 200) {
            this.initMyCourseList();
            this.$message.success('删除成功');
          } else {
            this.$message.error('删除失败');
          }
        })
        .catch((err) => {
          this.$message.error('删除失败');
          console.log(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.add {
  width: 100%;
  height: 80px;
  padding: 36px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.my-table {
  .cover {
    width: 130px;
    height: 125px;
    user-select: none;
  }
}
</style>
